<template>
    <div>
        <div class="mui-card">
        
            <div class="mui-card-content">
                <swiper :lublist='list' ></swiper>
            </div>
    
        </div>
        <div class="mui-card">
            <!--页眉，放置标题-->
            <div class="mui-card-header">小米</div>
            <!--内容区-->
            <div class="mui-card-content">
                <p>市场价格：1622;</p> 
                <div class="buynumber">购买数量：
                   <numberBox @getCount='getcount'></numberBox>
                  <transition
                    v-on:before-enter="beforeEnter"
                    v-on:enter="enter"
                    v-on:after-enter="afterEnter">
                    <div class="ball" v-if="isshow" ref="ball"></div>
                    </transition>
                </div>
                 <button type="button" class="mui-btn mui-btn-primary">立即购买</button>
                <button type="button" class="mui-btn mui-btn-danger" @click="isshow=!isshow">加入购物车</button> 
            </div>
                  
        </div>
        <div style="height:120px;background:yellow">
              {{$store.state.vuex_count}}-
              {{$store.getters.getcount_vuex}}
        </div>
    </div> 
</template>
<script>
import swiper from './subcommont/swiper'
import numberBox from './subcommont/numberBox'


export default {
    data(){
        return{
           list:[
              {id:'1',img:'https://placekitten.com/600/400'},
              {id:'2',img:'https://placekitten.com/600/400'}
           ],
           isshow:false,
           buycount:1
        }
    },
    components:{
        swiper,
        numberBox
    },
    methods:{
        
        beforeEnter(el){
           el.style.transform='translate(0,0)';
        },
        enter(el,done){
             el.offsetTop;
            //  获取小球距离页面的位置
            const ball=this.$refs.ball.getBoundingClientRect();
            // 获取购物车距离页面的位置
            const cart=document.getElementById('bage').getBoundingClientRect();
            // console.log(ball)
            const x=cart.left-ball.left;
            const y=cart.top-ball.top;
             el.style.transform=`translate(${x}px,${y}px)`;
             el.style.transition='all 0.5s ease';
             done();
        },
        afterEnter(){
           this.isshow=!this.isshow
        },
        getcount(count){
            this.buycount=count
            // console.log('接受到了数据'+count)
        }
    }
}
</script>
<style scoped>
   
   .ball{
       width: 15px;
       height: 15px;
       border-radius: 50%;
       background: red;
       position: absolute;
       z-index: 100;
       left: 124px;
       top: 10px;
   }
   .buynumber{
       position: relative;
   }
</style>

